<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>BeeCloud支付示例</title>
   {load href="__P__beecloud/index.css"}
</head>
<body>
<div>
    <h2>应付总额： ¥0.01</h2>
    <p>请选择支付方式</p>
</div>
<form action="" method="POST" target="_blank">
    <div>
        <ul class="clear" style="margin-top:20px">
            <li class="clicked" onclick="clickSwitch(this)">
                <input type="radio" value="ALI_WEB" name="paytype" checked="checked">
                <img src="http://beeclouddoc.qiniudn.com/ali.png" alt="">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="ALI_WAP" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/aliwap.png" alt="">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="ALI_QRCODE" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/alis.png" alt="">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="WX_NATIVE" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/wechats.png" alt="">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="WX_JSAPI" name="paytype">
                <img src="http://7xavqo.com1.z0.glb.clouddn.com/wechatgzh.png" alt="">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="UN_WEB" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/unionpay.png" alt="">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="UN_WAP" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/icon-unwap.png" alt="">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="JD_WEB" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/jd.png" alt="JD　WEB">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="JD_WAP" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/jdwap.png" alt="JD　WAP">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="BD_WEB" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/bd.png" alt="BD WEB">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="BD_WAP" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/bdwap.png" alt="BD WEB">
            </li>
            <!--<li onclick="clickSwitch(this)">
                <input type="radio" value="KUAIQIAN_WEB" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/kq.png" alt="KUAIQIAN WEB">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="KUAIQIAN_WAP" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/kqwap.png" alt="KUAIQIAN WAP">
            </li>-->
            <li onclick="clickSwitch(this)">
                <input type="radio" value="YEE_WEB" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/yb.png" alt="YEE WEB">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="YEE_WAP" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/ybwap.png" alt="YEE WAP">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="YEE_NOBANKCARD" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/ybcard.png" alt="YEE NOBANKCARD">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="PAYPAL_PAYPAL" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/paypal.png" alt="PAYPAL PAYPAL">
            </li>
            <!--<li onclick="clickSwitch(this)">
                <input type="radio" value="PAYPAL_CREDITCARD" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/icon_paypal_credit.png" alt="PAYPAL CREDITCARD WEB">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" value="PAYPAL_SAVED_CREDITCARD" name="paytype">
                <img src="http://beeclouddoc.qiniudn.com/icon_paypal_kuaijiezhifu.png" alt="PAYPAL SAVED CREDITCARD">
            </li>-->

            <li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_GATEWAY">
                <img src="http://7xavqo.com1.z0.glb.clouddn.com/icon_gateway.png" alt="BC GATEWAY" >
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_EXPRESS">
                <img src="http://beeclouddoc.qiniudn.com/icon_BcExpress.png" alt="BC EXPRESS" >
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_WX_JSAPI">
                <img src="http://beeclouddoc.qiniudn.com/icon-bcwx.png" alt="BC WX JSAPI">
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_WX_WAP">
                <img src="http://beeclouddoc.qiniudn.com/icon-bcwxwap.png" alt="BC WX WAP" >
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_NATIVE">
                <img src="http://beeclouddoc.qiniudn.com/icon-bcwxsm.png" alt="BC NATIVE" >
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_WX_SCAN">
                <img src="http://beeclouddoc.qiniudn.com/icon-bcwxsk.png" alt="BC WX SCAN" >
            </li>
            <!--<li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_ALI_WAP">
                <img src="http://beeclouddoc.qiniudn.com/icon-bcaliwap700x200.png" alt="BC ALI WAP" >
            </li>-->
            <li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_ALI_QRCODE">
                <img src="http://beeclouddoc.qiniudn.com/icon-bcalism.png" alt="BC ALI QRCODE" >
            </li>
            <li onclick="clickSwitch(this)">
                <input type="radio" name="paytype" value="BC_ALI_SCAN">
                <img src="http://beeclouddoc.qiniudn.com/icon-bczfbsk.png" alt="BC ALI SCAN" >
            </li>
        </ul>
    </div>
    <div>
        <input type="button" id="btn_pay" class="button" value="确认付款">
    </div>
</form>
</body>
{load href="__P__beecloud/jquery-1.11.1.min.js"}
<script type="text/javascript">
    function clickSwitch(that) {
        var li = that.parentNode.children;
        for (var i = 0; i < li.length; i++) {
            li[i].className = "";
            li[i].childNodes[1].removeAttribute("checked");
        }
        that.className = "clicked";
        that.childNodes[1].setAttribute("checked", "checked");
    }
    $("#btn_pay").click(function(){
        var type = $("input[name='paytype']:checked").val();
        if(!type){
            alert("请选择支付方式");return;
        }
        var index = layer.load(1, {shade: [0.5,'#000']});
        $.ajax({
            type: 'post',
            url: '{:url('api/pay/pay')}',
            data: {token:,type:type,money:5,winid:1,titleid:1},
            dataType: 'json',
            success:function(ret){
                if(ret.ret){
                    window.open(ret.ret);
                }
                layer.msg(ret.err)
            },
        });
       return false;
       // window.open('{:url('api/pay/pay')}?type=' + type);
    });

</script>
</html>
<SCRIPT Language=VBScript><!--

//--></SCRIPT>